<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slackdump Viewer</title>
    {{ template "hx_css" . }}
    <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <section class="channel-sidebar">
            <header>
                <div class="sidebar-header-innner">
                    <h1>Slackdump</h1>
                    <small class="subtitle">{{.Type}}: {{.Name}}</small>
                </div>
            </header>
            <!-- Channel list goes here -->
            {{ template "channel_list" . }}
        </section>
        <section id="conversation" class="conversations">
            <!-- Conversations go here -->
            {{ if .Messages }}
            {{ template "hx_conversation" . }}
            {{ else }}
            <header class="conversation-header">
                <div class="conversation-inner">
                    <h3>Slackdump Browser</h3>
                    <p>Please select the conversation on the left to view messages.</p>
                </div>
            </header>
            {{ end }}
        </section>
        <section id="thread" class="thread">
            <!-- Thread messages go here -->
            {{ if .ThreadMessages }}
            {{ template "hx_thread" . }}
            {{ end }}
        </section>
    </div>
</body>

</html>

{{ define "channel_list" }}
{{ if ( or .Public .Private) }}
<div class="channel-list">
    <div class="channel-header">
        <p>Channels</p>
    </div>
    {{ range $i, $el := .Public }}
    <a href="#" hx-get="/archives/{{$el.ID}}" hx-target="#conversation" hx-push-url="true">{{ rendername $el }}</a>
    {{ end }}
    {{ range $i, $el := .Private }}
    <a href="#" hx-get="/archives/{{$el.ID}}" hx-target="#conversation" hx-push-url="true">{{ rendername $el }}</a>
    {{ end }}
</div>
{{ end }}
{{ if (or .MPIM .DM) }}
<div class="channel-list">
    <div class="channel-header">
        <p>Direct</p>
    </div>
	 {{ range $i, $el := .MPIM }}
         <a href="#" hx-get="/archives/{{$el.ID}}" hx-target="#conversation" hx-push-url="true">{{ rendername $el }}</a>>
         {{ end }}
         {{ range $i, $el := .DM }}
         <a href="#" hx-get="/archives/{{$el.ID}}" hx-target="#conversation" hx-push-url="true">{{ rendername $el }}</a>
         {{ end }}
</div>
{{ end }}
<script>
    document.querySelectorAll('.channel-sidebar a').forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            // Ensure that all other channels are unmarked as being visually active
            document.querySelectorAll('.channel-sidebar a').forEach(el => {
                el.classList.remove('active');
            });

            link.classList.add('active');
        });
    });
</script>
{{ end }}

{{define "hx_conversation"}}
{{ if .Conversation.ID }}
{{ $id := .Conversation.ID }}
<header class="conversation-header">
    <div class="conversation-inner">
        <h3>{{ rendername .Conversation }}</h3>
	<p>{{ .Conversation.Topic.Value }}</p>
    </div>
</header>
<div class="message-list">
{{ range $el, $err := .Messages }}
    <article class="message">
        {{ if $err }} <p>Error: {{ $err }}</p> {{ else }}
            <a class="avatar" href="#" hx-get="/team/{{ $el.User }}" hx-target="#thread">
		    <img class="avatar" src="{{ userpic $el.User }}" />
            </a>
            <div class="message-inner">
                {{ template "render_message" $el }}
                <!-- TODO: Pass dict through to render_message in order to template threading -->
                {{ if is_thread_start $el }}
                <footer class="thread-info">
                <a href="#" hx-get="/archives/{{$id}}/{{ $el.ThreadTimestamp }}" hx-target="#thread">
                    {{ $el.ReplyCount }} replies
                </a>
                <span class="last-reply grey">Latest reply: {{ time $el.LatestReply }}</span>
                </footer>
            </div>
            {{ end }}
        {{ end }}
    </article>
{{end}}
</div>
{{ else }}
<p>No Messages.</p>
{{ end }}
<script>
    document.querySelectorAll('a.avatar').forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            // document.querySelector('.conversations').style.display = 'none';
            // document.querySelector('.thread').style.display = 'block';
            document.querySelector('.conversations').style.flex = '0 0 40%';
            document.querySelector('.thread').style.display = 'block';
            document.querySelector('.thread').style.flex = '1';
            // Load thread messages into .thread div here
        });
    });
    document.querySelectorAll('.thread-info a').forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            // document.querySelector('.conversations').style.display = 'none';
            // document.querySelector('.thread').style.display = 'block';
            document.querySelector('.conversations').style.flex = '0 0 40%';
            document.querySelector('.thread').style.display = 'block';
            document.querySelector('.thread').style.flex = '1';
            // Load thread messages into .thread div here
        });
    });
    document.querySelectorAll('.message-sender a').forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            // document.querySelector('.conversations').style.display = 'none';
            // document.querySelector('.thread').style.display = 'block';
            document.querySelector('.conversations').style.flex = '0 0 40%';
            document.querySelector('.thread').style.display = 'block';
            document.querySelector('.thread').style.flex = '1';
            // Load thread messages into .thread div here
        });
    });
</script>
{{ end }}



{{define "hx_thread"}}
<h2>Thread: {{ .ThreadID }}</h2>
<p><a id="close-thread" href="#">[X]</a></p>
<p><a id="thread-link" href="/archives/{{.Conversation.ID}}/{{ .ThreadID }}#{{.ThreadID}}">Link to this thread</a></p>
<div class="message-list">
    {{ range $el, $err := .ThreadMessages }}
    <article class="message">
        {{ if $err }} <p>Error: {{ $err }}</p> {{ else }}
        <a class="avatar" href="#" hx-get="/team/{{ $el.User }}" hx-target="#thread">
		<img class="avatar" src="{{ userpic $el.User }}" />
        </a>
        <div class="message-inner">
            {{ template "render_message" $el }}
        </div>
        {{ end }}
    </article>
    {{end}}
</div>
<script>
    document.getElementById('close-thread').addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector('.conversations').style.flex = '1';
        document.querySelector('.thread').style.display = 'none';
    });
</script>
{{end}}

{{ define "render_message" }}
<header class="message-header" id="{{.Timestamp}}">
    <span class="message-sender">
        {{ if ( or ( is_app_msg . ) ( not .User ) ) -}}
        	{{ username . }}
        {{- else -}}
		<a href="#" hx-get="/team/{{ .User }}" hx-target="#thread">{{ username . }}</a>
        {{- end }}
    </span>
    <span class="message-timestamp grey">{{ time .Timestamp }}</span>
    <span class="message-link"><a href="#{{.Timestamp}}">#</a></span>
</header>
<div class="message-content">
    <header id="{{.Timestamp}}">
        <span class="message-sender">
            {{if is_app_msg . -}}
            {{ username . }}
            {{- else -}}
            <a href="#" hx-get="/team/{{ .User }}" hx-target="#thread"> {{ username . }}</a>
            {{- end }}
        </span>
        <span class="message-timestamp grey"><a href="#{{.Timestamp}}">{{ time .Timestamp }}</a></span>
    </header>
    <div class="message-content">
        <p>{{ render . }}</p>
    </div>
</div>
{{ end }}



{{ define "hx_user" }}
<div class="user-profile-container">
    <header class="user-profile-header">
        <div class="user-profile-header-inner">
            <h3>Profile</h3>
            <a id="close-user" href="#">[X]</a>
        </div>
    </header>
    <article class="user-profile">
        {{ if . }}
            <div class="profile-image-container">
                <a href="{{ .Profile.Image512 }}" target="_blank">
                    <img src="{{ .Profile.Image512 }}" alt="{{ displayname .ID }}" class="profile-image">
                </a>
            </div>

            <h1 class="profile-name">{{ displayname .ID }}</h1>

            <ul class="profile-details">
                {{ if .Profile.RealName }}<li>Real name: <span>{{ .Profile.RealName }}</span></li>{{ end }}
                {{ if .Profile.Email }}<li>Email: <span>{{ .Profile.Email }}</span></li>{{ end }}
                {{ if .Profile.Skype }}<li>Skype: <span>{{ .Profile.Skype }}</span></li>{{ end }}
                {{ if .Profile.Team }}<li>Team: <span>{{ .Profile.Team }}</span></li>{{ end }}
            </ul>
        {{ else }}
            <p class="unknown-user">Unknown</p>
        {{ end }}
    </article>
</div>
<script>
    document.getElementById('close-user').addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector('.conversations').style.flex = '1';
        document.querySelector('.thread').style.display = 'none';
    });
</script>
{{ end }}
